<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>部门</title>

    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <link type="text/css" rel="stylesheet" href="/css/moregood.css"/>
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>

</head>
<body>
<div id="app">

    <div>
        <el-form :inline="true" :model="deptVo" class="demo-form-inline">

            <el-form-item label="部门名字" prop="deptName">
                <el-input v-model="deptVo.deptName" placeholder="部门名字"></el-input>
            </el-form-item>
            <el-form-item label="部门状态" prop="deptStatus">

                <el-select v-model="deptVo.deptStatus" placeholder="请选择部门" style="width: 100%">
                    <el-option value="0">已经裁撤的部门</el-option>
                    <el-option value="1">存在的部门</el-option>
                </el-select>

            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
    </div>

    <el-table
            :data="tableData"
            border
            :cell-style="styleBack"
            :header-cell-style="getRowClass"
            style="width: 100%">
        <el-table-column
                prop="deptId"
                label="编号"
                width="100">
        </el-table-column>
        <el-table-column
                prop="deptName"
                label="部门名称"
                width="180">
        </el-table-column>

        <el-table-column
                prop="deptStatus"
                label="部门状态"
                width="180">
            <template slot-scope="scope">

                <el-tag size="small" v-if="scope.row.deptStatus == 1">部门存在</el-tag>
                <el-tag size="small" v-else-if="scope.row.deptStatus == 0" style="color: red">部门已被裁撤</el-tag>
                <el-tag size="small" v-else>部门不存在</el-tag>

            </template>
        </el-table-column>

        <el-table-column
                prop="deptDesc"
                label="部门详情"
                width="600">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="380">
            <template slot-scope="scope">
                <el-button size="small" type="success" @click="editDept(scope.row)">修改</el-button>
                <el-button size="small" type="danger" @click="del(scope.row)">删除</el-button>
                <el-button size="small" type="danger" @click="account1(scope.row)">更改部门状态</el-button>
                <el-button size="small" type="danger" @click="showdown(scope.row)">下属科室</el-button>
            </template>
        </el-table-column>
    </el-table>


    <%--分支详情弹框--%>
    <el-dialog
            title="提示"
            :visible.sync="dialogVisible1"
            width="30%"
    >

        <el-tag
                v-for="tag in tags"
                :key="tag.name"
                :type="tag.type">
            {{tag.name}}
        </el-tag>

        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">关闭</el-button>


    </span>
    </el-dialog>


    <%--部门修改弹框--%>
    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
    >
        <!--:model:绑定表单数据-->
        <el-form :model="updateForm" label-width="110px">

            <el-form-item label="部门名称" prop="deptName">
                <el-select v-model="updateForm.deptName" placeholder="请选择部门" style="width: 100%">
                    <el-option>诊疗部门</el-option>
                    <el-option>辅助诊疗部门</el-option>
                    <el-option>护理部门</el-option>
                    <el-option>行政后勤部门</el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="部门描述" prop="deptDesc">
                <el-input v-model="updateForm.deptDesc"></el-input>
            </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deptUpdate()">确认修改</el-button>

    </span>
    </el-dialog>


</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            deptVo: {},
            tableData: [],
            dialogVisible1: false,
            dialogVisible: false,
            dialogVisible01: false,
            editForm: {},
            tableDate: [],
            updateForm: {},
            accountForm: {},

            tags: [],
        },
        //当html页面加在完毕后执行得函数而且只会被执行一次
        created() {
            this.initTable();
        },
        methods: {

            //展示分支并实现动态五颜六色
            showdown(row) {
                this.dialogVisible1 = true;
                axios.get("/dept/getNames?deptId=" + row.deptId).then(resp => {
                    if (resp.data.code === 200) {
                        let b = new Array();
                        resp.data.data.forEach(value => {
                            let c = {};
                            c.name = value;
                            c.type = ' ';
                            b.push(c)

                        })


                        if (b.length == 6) {
                            b[0].type = ''
                            b[1].type = 'warning'
                            b[2].type = 'success'
                            b[3].type = 'info'
                            b[4].type = 'warning'
                            b[5].type = 'danger'
                        }
                        if (b.length == 1) {
                            b[0].type = 'success'
                        }
                        if (b.length == 2) {
                            b[0].type = 'success'
                            b[1].type = 'info'
                        }


                        this.tags = b;


                    }
                })

            },


            //查询
            onSubmit() {
                axios.post("/dept/select", this.deptVo).then(resp => {
                    if (resp.data.code === 200) {
                        this.$message.success("查询成功");
                        this.tableData = resp.data.data;
                    }
                })
            },
            // 更改状态
            account1(row) {

                axios.get("/dept/updateStatus?deptId=" + row.deptId + "&deptStatus=" + row.deptStatus).then(resp => {
                    if (resp.data.code === 200) {
                        this.$message.success("更改成功");
                        this.initTable();
                    }
                })


            },


            //删除部门
            del(row) {
                axios.post("dept/delete?deptId=" + row.deptId).then(resp => {
                    if (resp.data.code === 200) {
                        this.$message.success("删除成功");
                        this.initTable();
                    }
                })
            },
            //确认修改部门
            deptUpdate() {
                axios.post("/dept/update", this.updateForm).then(resp => {
                    if (resp.data.code === 200) {
                        this.$message.success("修改部门成功");
                        //关闭表单弹窗
                        this.dialogVisible = false;
                        //重新加载表格数据
                        this.initTable();
                    }
                })
            },
            //点击修改
            editDept(row) {
                this.dialogVisible = true;
                //在此转json是为了把数据固定阻断双向绑定里面的数据同步
                let parse = JSON.parse(JSON.stringify(row));
                this.updateForm = parse;
            },
            initTable() {
                axios.post("/dept/select", this.deptVo).then(resp => {
                    console.log(resp)
                    this.tableData = resp.data.data;
                })
            },

            // 表格奇偶层样式
            styleBack({ row, column, rowIndex, columnIndex }) {
                if ((rowIndex + 1) % 2 === 0) {
                    return "background:#053c4a; color:#fff;border:1px solid #053c4a";
                } else {
                    return "background:#042831; color:#fff;border:1px solid #042831";
                }
            },
            // 表头样式
            getRowClass({ rowIndex }) {
                return "background:#053c4a; color:#fff;border:3px solid #053c4a";
            },
        }
    })

</script>
</html>
